<template>
  <div>
		<!--datalist  左边那4个飙升榜，新歌榜怎么渲染出来的。  -->
    <div class="ul" v-for="(item,index) in datalist" :key="item.index">
      <div class="box1" >
				<!-- 这个 -->
        <img :src="item.coverImgUrl" alt="" @mouseenter="enter(index)" @mouseleave='leaver()' @click="details(item.id)">
				<!-- id值传到 -->
        <!-- <p class="p " v-show='activeindex ==index'><i class="el-icon-caret-right"></i></p> -->

      </div>
      <div class="list">
        <div class="fenter" v-for="i in uper">
					<div class="item">{{i.nickname}}</div>
        </div>
        <!-- {{item1}} -->
        <!-- v-for="(item1,index) in data" :key="item.userId" -->
      </div>
    </div>
  </div>
</template>
<style scoped>
.ul {
  display: flex;
  margin-bottom: 20px;
}
.ul div {
  position: relative;

  list-style: none;
}
.box1 {
  margin: 10px;
  width: 200px;
  height: 200px;
}
.list {
  width: 700px;
  height: 220px;
  border: 1px solid #000;
}
.ul .box1 img {
  border-radius: 10px;
  width: 100%;
}
.ul .box1 img:hover {
  cursor: pointer;
}
.list .fenter .item {
	line-height: 28px;
	height: 28px;
  list-style: none;
}
.p {
  position: absolute;
  top: 75px;
  left: 75px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.8);
}
.el-icon-caret-right {
  text-align: center;
  line-height: 50px;
  color: red;
  font-size: 50px;
}
</style>
<script>
import { API } from "../../../common/constant";
import axios from "axios";
export default {
  data() {
    return {
      datalist: [],
      isShow: false,
      activeindex: -1,
      id: "",
      data: [],
			uper:[],
    };
  },
  mounted() {
    axios.get(`${API}/toplist`).then((res) => {
      console.log(res);
      this.datalist = res.data.list.slice(0,4);
    });
    this.handluclick();
  },
  methods: {
    // 播放显示与隐藏
    enter(index) {
      this.activeindex = index;
      // this.isShow = true;
    },
    leaver() {
      this.activeindex = -1;
      // this.isShow = false;
    },
    // axios
    details(id) {
			// console.log(id);
      this.id = id;
      this.handluclick(id);
      // this.$router.push(`/details?q=${id}`);
    },
    handluclick() {
      axios
        .get(`${API}/playlist/detail`, {
          params: {
            id: this.id,//这里面
          },
        })
        .then((res) => {
          // console.log(res.data.playlist.subscribers);
          console.log(res.data);
					this.uper = res.data.playlist.subscribers
          // console.log(res.data);
          // console.log(res.data.playlist);
    			//  var h = res.data.playlist;
    			//  console.log(h);
   			 	//  for (let i = 0; i < h; i++) {
    			//    // const element = array[i];
    			//    console.log(i);
    			//  }
    			//  this.data = res.data.playlist;
    			//  // .subscribers
        });
    },
  },
};
</script>
